html:has(#admin-core-app-loading),
body:has(#admin-core-app-loading) {
  height: 100%;
  margin: 0;
}

html:has(#admin-core-app-loading) #app {
  height: 0;
  visibility: hidden;
}

#app.app-hidden {
  height: 0;
  visibility: hidden;
}

#admin-core-app-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  line-height: 38px;
  background-color: var(--core-bg-color-04, #f4f4f5);

  &.app-loading-hidden {
    animation: loading-fade-out 0.6s ease-out forwards;
  }

  .loader {
    --item-width: 20px;
    --duration: 0.85;
    --item-color: rgb(var(--core-primary-color, #006be6));

    position: relative;
    display: flex;
    align-items: end;
    justify-content: space-between;
    width: 100px;
    height: 100px;
    overflow: hidden;

    .loader-item {
      width: var(--item-width);
      background-color: var(--item-color);

      &.left-side,
      &.right-side {
        height: 40px;
      }

      &.left-side {
        animation: loading-push-pop-pushed calc(var(--duration) * 1s) ease
          infinite alternate-reverse;
      }

      &.right-side {
        animation: loading-push-pop-pushed calc(var(--duration) * 1s) ease
          infinite alternate;
      }

      &.middle {
        height: 30px;
      }
    }

    .move {
      position: absolute;
      top: 100%;
      left: 0;
      width: var(--item-width);
      height: 20px;
      transform: translateY(-100%);
      animation: loading-push-pop-slide calc(var(--duration) * 1s) infinite
        alternate ease-in-out;

      &::before {
        position: absolute;
        width: 100%;
        height: 100%;
        content: ' ';
        background-color: var(--item-color);
        animation: loading-push-pop-flip calc(var(--duration) * 1s) infinite
          alternate ease-in-out;
      }
    }
  }

  .loading-text {
    font-size: 28px;
    font-weight: 600;
    color: var(--core-text-color-01, #1c1c1e);
  }
}

@keyframes loading-push-pop-pushed {
  0%,
  72.5% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 100%);
  }
}

@keyframes loading-push-pop-slide {
  to {
    transform: translate(0, -100%) translate(80px, 0);
  }
}

@keyframes loading-push-pop-flip {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(0, -80px) rotate(90deg);
  }

  100% {
    transform: translate(0, 0) rotate(180deg);
  }
}

@keyframes loading-fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
